<template>
  <div class="app-container">
    <div class="files">
      <div class="files-left">
        <el-menu class="el-menu-vertical-demo" @select="handleSelece" :default-active="ifyindex">
          <el-menu-item :index='index' v-for="(item,index) in ifydata" :key="index">
            <span slot="title">{{item}}</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="files-right">
        <div class="files-btm" v-if="ifyindex === 0">
          <div class="change1">
            <p>
              <span>资产类别:</span>{{tempData.propertyType}}
            </p>
            <p>
              <span>资产名称:</span>{{tempData.propertyName}}
            </p>
            <p>
              <span>品牌:</span>{{tempData.pinpai}}
            </p>
            <p>
              <span>计数单位:</span>{{tempData.countingUnit}}
            </p>
            <p>
              <span>设备性能参数:</span>{{tempData.powers}}
            </p>
            <p>
              <span>材质:</span>
              <label>{{tempData.caizhi}}</label>
            </p>
            <p>
              <span>规格型号:</span>{{tempData.propertyGuige}}
            </p>
            <p>
              <span>位号:</span>{{tempData.weihao}}
            </p>
            <p>
              <span>设备序列号:</span>{{tempData.xuhao}}
            </p>
            <p>
              <span>设备生产编码:</span>{{tempData.bianma}}
            </p>
            <p>
              <span>润滑方式:</span>
              <label>{{tempData.runhua}}</label>
            </p>
            <p>
              <span>保养类型:</span>{{tempData.baoyang}}
            </p>
            <p>
              <span>SN号:</span>{{tempData.propertySn}}
            </p>
            <p>
              <span>金额:</span>{{tempData.propertyJine}}
            </p>
            <p>
              <span>使用公司:</span>{{tempData.companys}}
            </p>
            <p>
              <span>使用部门:</span>{{tempData.departments}}
            </p>
            <p>
              <span>购入日期:</span>{{tempData.purchaseTime}}
            </p>
            <p>
              <span>使用人:</span>{{tempData.usePerson}}
            </p>
            <p>
              <span>管理员:</span>{{tempData.managerPerson}}
            </p>
            <p>
              <span>检修人:</span>{{tempData.jianxiuren}}
            </p>
            <p>
              <span>机修工:</span>{{tempData.jixiugong}}
            </p>
            <p>
              <span>维修人:</span>{{tempData.weixiuren}}
            </p>
            <p>
              <span>所属公司:</span>{{tempData.belongCompany}}
            </p>
            <p>
              <span>区域:</span>{{tempData.areas}}
            </p>
            <p>
              <span>存放地点:</span>{{tempData.storeAreas}}
            </p>
            <p>
              <span>来源:</span>{{tempData.sourceOf}}
            </p>
            <p class="beizhu">
              <span>设备参数:</span>
              <label>{{tempData.canshu}}</label>
            </p>
            <p class="beizhu">
              <span>备注:</span>
              <label>{{tempData.remarks}}</label>
            </p>
            <p class="img">
              <span>照片:</span>
              <img :src="tempData.imgurl" alt="">
            </p>
          </div>
        </div>
        <!-- <div class="files-btm" v-if="ifyindex === 1">
          <div class="change1">
            <p>
              <span>资产类型:</span>资产类型
            </p>
            <p>
              <span>所属公司:</span>使用公司
            </p>
            <p>
              <span>分摊部门:</span>123123
            </p>
            <p>
              <span>供应商:</span>123123
            </p>
            <p>
              <span>含税金额:</span>123123
            </p>
            <p>
              <span>原值:</span>件
            </p>
            <p>
              <span>税额:</span>123
            </p>
            <p>
              <span>净值:</span>使用部门
            </p>
            <p>
              <span>财务使用期限:</span>123123
            </p>
            <p>
              <span>累计折旧:</span>123123
            </p>
            <p>
              <span>残值率:</span>123123
            </p>
            <p>
              <span>入账期间:</span>123123
            </p>
            <p>
              <span>入账时间:</span>123123
            </p>
            <p>
              <span>财务信息状态:</span>123123
            </p>
          </div>
        </div> -->
        <!-- 维保信息 -->
        <div class="files-btm" v-if="ifyindex === 1">
          <div class="change1">
            <p>
              <span>是否有备用:</span>{{tempData.spareIs}}
            </p>
            <p>
              <span>使用期限:</span>{{tempData.serviceLife}}
            </p>
            <p>
              <span>联系人:</span>{{weibao.persons}}
            </p>
            <p>
              <span>联系方式:</span>{{weibao.phoneType}}
            </p>
            <p>
              <span>负责人:</span>{{weibao.chargePerson}}
            </p>
            <p>
              <span>巡检周期:</span>{{tempData.maintainCycle}}天
            </p>
            <p>
              <span>维保到期时间:</span>{{weibao.maintenanceDate}}
            </p>
            <p>
              <span>供应商:</span>{{weibao.suppliers}}
            </p>
            <p class="beizhu">
              <span>维保说明:</span>
              {{weibao.remarks}}
            </p>
          </div>
        </div>
        <!-- 维保信息 -->
        <!-- 维修记录 -->
        <div class="files-btm" v-if="ifyindex === 2">
          <el-table 
            :data="wbdata" 
            height="400"
            ref="table"
            :show-header="true" >
            <el-table-column align="center" prop="serviceJine" width="120" label="维修状态">
              <template slot-scope="scope">
                <div class="orderStatus">
                  <p v-if="scope.row.wxstatus == '报修'" class="yellow">报修中</p>
                  <p v-if="scope.row.wxstatus == '维修中'" class="blue">维修中</p>
                  <p v-if="scope.row.wxstatus == '已完成'" class="green">已完成</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="content" label="维修内容">
              <template slot-scope="scope">
                <div class="ellisp">{{scope.row.serviceContent}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="content" label="维修备注">
              <template slot-scope="scope">
                <div class="ellisp">{{scope.row.remarks}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="serviceJine" width="120" label="维修花费金额"></el-table-column>
            <el-table-column align="center" prop="servicePerson" width="100" label="维修人"></el-table-column>
            <el-table-column align="center" prop="warrantyPerson" width="100" label="报修人"></el-table-column>
            <el-table-column align="center" prop="serviceDate" width="150" label="维修时间"></el-table-column>
            <el-table-column align="center" prop="evaluateWeixiu" width="150" label="维修设备评价"></el-table-column>
            <el-table-column align="center" prop="evaluateWeixiuRemarks" width="150" label="备注"></el-table-column>
            <el-table-column align="center" prop="evaluateBaoxiu" width="150" label="对维修人评价"></el-table-column>
            <el-table-column align="center" prop="evaluateBaoxiuRemarks" width="150" label="备注"></el-table-column>
          </el-table>
          <div class="zhejiu">
            <div class="zhejiu1">{{zhejiu}}</div>
          </div>
          <el-pagination hide-on-single-page background layout="prev, pager, next" :total="total" @prev-click="goPrev" @next-click="goNext" align="right" />
        </div>
        <!-- 维修记录 -->
        <!-- 子设备信息 -->
        <div class="files-btm" v-if="ifyindex === 3">
          <div class="first">
            <div class="div">
              <div class="neirong">
                <el-tree
                  :data="tableData"
                  node-key="names"
                  highlight-current
                  :props="{label: 'names',children: 'depositoryDtoList'}"
                  @current-change="handleNodeClick"
                  v-loading="threeloading"
                ></el-tree>
              </div>
            </div>
            <div class="xinxi">
              <div class="zd3">
                <div class="zd3-btm">
                  <el-table
                    :data="zichanData"
                    style="width: 100%;border-radius: 8px;"
                    :show-header="showHeader"
                    v-loading="loading"
                  >
                    <el-table-column type="index" align="center" label="序号" width="80" />
                    <el-table-column align="center" prop="canshu" width="150" label="参数" />
                    <el-table-column align="center" prop="names" width="120" label="名称" />
                    <el-table-column align="center" prop="snCode" width="120" label="SN编码" />
                    <el-table-column align="center" prop="remarks" label="备注" />
                  </el-table>
                  <el-pagination
                    background
                    align="right"
                    :page-size="50"
                    layout="prev, pager, next"
                    :total="total1"
                    @current-change='goPage1'
                    @prev-click="goPrev1"
                    @next-click="goNext1"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 子设备信息 -->
        <!-- 文档信息 -->
        <div class="files-btm fileup" v-if="ifyindex === 4">
          <div class="uping" v-for="(item,index) in fileNum" :key="index">
            <p>
              <span>资料名</span>
              <span>{{item.fileDescribe}}</span>
            </p>
            <p>
              <span>上传资料</span>
              <strong v-if="item.fileName">{{item.fileDescribe}}</strong>
              <strong v-if="item.fileName" @click="downLoad(item.fileName)">
                下载
                <i class="el-icon-download" />
              </strong>
            </p>
          </div>
        </div>
        <!-- 文档信息 -->
        <div class="btns">
          <el-button type="primary" size="small" @click="goback">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { idSearchDetail,idSelectWeixiu,getziFenlei,zishebeiList } from '@/api/caigou'
import { getUserFiles } from '@/api/people'
let temp = null;
export default {
  data(){
    return {
      ifydata:['基本信息','维保信息','维修记录','子设备管理','文档信息'],
      total: 1,
      total1: 1,
      tempData: '',
      ifyindex: 0,
      weibao:{},
      wbdata:[],
      threeloading: false,
      loading: false,
      tableData: [],  //表格数据
      zichanData: [],  //资产数据
      fileNum: [], //需要上传的文件个数
      zhejiu: ''
    }
  },
  mounted(){
    temp = JSON.parse(this.$route.params.options)
    this.tempData = temp
    console.log(this.tempData)
    this.getZishebei(temp.oid)
    this.getList(temp.oid)
    this.getFilesList(temp.oid)
  },
  methods:{
    // 获取维保详情
    getDetail(){
      idSearchDetail({oid:temp.oid}).then(res => {
        console.log('维保详情',res)
        if(res.data && res.data.length){
          this.weibao = res.data[0].starchOrganizationAlteration
        }
      })
    },
    /**
     * -------------------------------------
     * ---------------文档管理---------------
     * -------------------------------------
     */
    //  获取设备文件列表
    getFilesList(id){
    	console.log('!!!!!!!!!!!!!!!!!!!!!!')
      getUserFiles({parentId:id}).then(res => {
        console.log('文件列表',res)
        if(res.data.list.length != 0){
          this.fileNum = []
          res.data.list.map(item => {
            this.fileNum.push({
              fileDescribe: item.fileDescribe,
              fileName: item.fileName,
              fileId: item.fileId,
              parentId: item.parentId
            })
          })
        }
      })
    },
    downLoad(filepath) {
      window.open(filepath);
    },
    /**
     * ---------------------------------------
     * -------------子设备管理-----------------
     * ---------------------------------------
     */
    // 点击分类菜单获取对应商品
    handleNodeClick(data, checked, node) {
      console.log(data)
      this.form = {...data}
      this.getZishebei(data.tid)
    },
    /**
     * 获取子设备
     */
    getZishebei(id){
      this.loading = true
      return new Promise((resolve) => {
        // let temp1 = null
        zishebeiList({parentIds:id}).then(res => {
          console.log(res)
          this.zichanData = res.data
          this.loading = false
          resolve(res.data)
          // temp1 = res.data
        })
        // resolve(temp1)
      })
    },
    /**
     * 获取子设备分类
     */
    getList(id) {
      getziFenlei({parentId: id}).then(res => {
        console.log('获取分类')
        console.log(res)
        this.tableData = res.data
        this.threeloading = false
      })
    },


    
    // 获取设备维修记录
    getJilu(){
      idSelectWeixiu(temp.oid).then(res => {
        console.log(res)
        this.wbdata = res.data
        console.log(temp.propertyJine)
        const sums = res.data.reduce((prev,current) => {
          console.log(current.serviceJine*1)
          return prev + current.serviceJine*1
        },0)
        this.zhejiu = '折旧率:' + (sums/temp.propertyJine*1*0.2).toFixed(2) + ' %';
      })
    },
    /**
     * 返回
     */
    goback(){
      this.$router.go(-1)
    },
    /**
     * 左侧导航切换
     */
    handleSelece(e){
      console.log(e)
      this.ifyindex = e
      console.log(e,typeof e)
      if(e === 1){
        console.log('1111')
        this.getDetail()
      }else if(e === 2){
        console.log('维修记录')
        this.getJilu()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-tree-node__content:hover {
  background-color: #18a05e;
  border-radius: 3px;
  color: #fff;
}
/deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background-color: #18a05e;
  border-radius: 3px;
  color: #fff;
}
.zhejiu{
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #cccccc;
  .zhejiu1{
    font-size: 14px;
    width: 135px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #ee3709;
    color: #fff;
  }
}
.orderStatus {
  display: flex;
	justify-content: center;
  > p {
    padding: 0px 5px;
    color: #fff;
    font-size: 12px;
    border-radius: 2px;
    margin: 0 0px 0 0;
  }
  .blue {
    background: #3a87ad;
  }
  .green {
    background: #18a05e;
  }
  .yellow {
    background: #ff7a0e;
  }
  .red {
    background: #c60000;
  }
  .zise{
    background: #c7ab10
  }
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e !important;
  border-color: #18a05e !important;
}
/deep/.el-button--primary:hover,
.el-button--primary:focus {
  background: #18a05e !important;
  border-color: #18a05e !important;
  color: #fff !important;
}
/deep/.el-button:hover,
.el-button:focus {
  color: #18a05e;
  background-color: transparent;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e;
  border-color: #18a05e;
}
.btns{
  display: flex;
  justify-content: flex-end;
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.ellisp{
	width: 100%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-align: left;
}
.files {
  display: flex;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  padding: 20px 20px 60px 20px;
  position: relative;
}
.files-btm .btn-prev:after {
  content: "上一页";
}
.files-btm .btn-next:before {
  content: "下一页";
}
.files-btm .btn-prev,
.files-btm .btn-next {
  width: 65px;
}
.files-left {
	width: 160px;
	margin-right: 20px;
  height: 420px;
  overflow-y: auto;
	/deep/.el-menu{
		border-right: none;
	}
	/deep/.el-menu-item{
		height: 35px;
		line-height: 35px;
		margin-bottom: 8px;
	}
	/deep/.el-menu-item.is-active{
		color: #fff;
		border-radius: 5px;
		background: rgba(24,160,94,.8);
	}
}
.files-right {
  flex: 1;
  overflow: hidden;
}
.files-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  // margin-top: 20px;
  overflow: hidden;
  &-title {
    display: flex;
    align-items: center;
    height: 45px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
  .addDate {
    margin: 20px 32px 10px 32px;
    height: 32px;
    border-radius: 3px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border: 1px dashed rgba(0, 0, 0, 0.3);
  }
  .el-button--text {
    margin: 0 15px;
  }
}
.change1{
  display: flex;
  padding: 20px 20px 20px 0;
  flex-wrap: wrap;
  > p {
    width: 33%;
    font-size: 14px;
    display: flex;
    margin: 10px 0;
    align-items: center;
    color: #999;
    >label{
      flex: 1;
      font-weight: 100;
    }
    > span {
      display: block;
      width: 120px;
      text-align: right;
      padding-right: 15px;
      color: #18A05E;
    }
  }
  .img{
    width: 100%;
    >img{
      width: 100px;
      height: 100px;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
  .beizhu{
    width: 100%;
    height: 60px;
    align-items: flex-start;
  }
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #18a05e;
  color: #fff;
}
/deep/.btn-prev:after {
  content: "上一页";
}
/deep/.btn-next:before {
  content: "下一页";
}
/deep/.btn-prev,
/deep/.btn-next {
  width: 65px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.el-tree {
  position: relative;
  cursor: default;
  background: #fff;
  width: 90%;
  color: #606266;
}
.el-menu-vertical-demo {
  width: 100%;
}
.first {
  padding: 20px 20px 20px 0;
  border-radius: 0 0 10px 10px;
  display: flex;
  flex: 1;
  background-color: #fff;
}
.div {
  width: 20%;
  height: 520px;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid #ccc;
}
.top {
  background-color: white;
  height: 50px;
  margin-bottom: 10px;
  margin-left: 20px;
}
.btns {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.btns h3 {
  padding: 5px 10px;
  border-radius: 3px;
  background: #18a05e;
  // border-radius: 3px;
  color: #fff;
  font-size: 14px;
  font-weight: 100;
  text-align: center;
  cursor: pointer;
  margin-top: 10px;
}
.neirong {
  margin-left: 20px;
  display: flex;
}
.xinxi {
  width: 80%;
  padding-left: 25px;
}
.btn {
  display: flex;
}
.btn h3 {
  margin-right: 10px;
  width: 64px;
  height: 32px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 32px;
  font-weight: 100;
  text-align: center;
  cursor: pointer;
  margin-top: 10px;
}
.select {
  color: #18a05e;
  border-bottom: 1px solid #18a05e;
}
.zd3-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  overflow: hidden;
  &-title {
    display: flex;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
  .el-pagination {
		white-space: nowrap;
		padding: 15px 5px;
		color: #303133;
		font-weight: bold;
	}
  .addDate {
    margin: 20px 32px 10px 32px;
    height: 32px;
    border-radius: 3px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border: 1px dashed rgba(0, 0, 0, 0.25);
  }
  .el-button--text {
    margin: 0 10px;
  }
}
.fileup {
  position: relative;
  padding: 20px;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  // align-items: center;
  justify-content: space-between;
  .uping {
    width: 49%;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    > p {
      width: 90%;
      font-size: 14px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      color: #333;
      /deep/.el-input__inner {
        // width: inherit;
        background: none;
        height: 32px;
        // line-height: 32px;
        color: #333;
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 0 25px;
      }
      /deep/.el-input__icon {
        line-height: 32px;
      }
      /deep/.el-upload-dragger {
        width: 100%;
        height: 100px;
      }
      /deep/.el-upload-dragger .el-icon-upload {
        font-size: 60px;
        color: #c0c4cc;
        margin: 0;
        line-height: 1;
        width: 100%;
      }
      /deep/.el-upload {
        width: 100%;
      }
      .userselect {
        // max-width: 250px;
        flex: 1;
      }

      > span {
        display: block;
        width: 100px;
        text-align: right;
        padding-right: 15px;
        &:last-child {
          text-align: left;
          color: #888;
        }
      }
      > input {
        width: inherit;
        flex: 1;
        height: 32px;
        border-radius: 3px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding-left: 10px;
        color: #333;
      }
      > strong {
        display: inline-block;
        padding-right: 50px;
        font-weight: 100;
        font-size: 14px;
        &:last-child {
          cursor: pointer;
          color: #13ce66;
          font-weight: 600;
        }
      }
      > div {
        width: inherit;
        flex: 1;
      }
    }
  }
}
</style>